<template>
	<view>
		<!-- 设备异常情况 -->
		<view class="equipment-section">
		    <view class="section-title">{{ title }}</view>
		   <view class="equipment-grid">
		     <view class="equipment-card"
		          :class="item.state ? item.state : 'pranmy'"
		          v-for="(item, index) in equipmentData"
		          :key="index"
		          @click="showEquipmentDetail(item)">
		       <view class="equipment-header">
		         <view class="equipment-name">
		           <span class="status-dot" :class="'status-' + (item.state || 'pranmy')"></span>
		           {{ item.name }}
		         </view>
		         <view class="equipment-count" :class="item.state || 'pranmy'">{{ item.count }}</view>
		       </view>
		       <view class="equipment-unit">项功能异常</view>
		       <view class="equipment-detail">{{ item.desc }}</view>
		     </view>
		   </view>
		</view>
		<!-- 设备详情弹窗 -->
		<uni-popup ref="popup" type="center" :mask-click="true">
		  <view class="popup-wrapper" style="width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center;">
		    <view class="popup-content" style="width: 100%; max-width: 100%;">
		      <view class="modal-content">
		        <view class="modal-header">
		          <view class="modal-title">{{modalTitle}}</view>
		          <button class="close-btn" @click="closeModal">×</button>
		        </view>
		        <view class="modal-body">
		          <uni-collapse v-if="detailList.length > 0" accordion="false">
		            <!-- 在模板中修改uni-collapse-item组件 -->
		            <uni-collapse-item 
		              v-for="(item, index) in detailList" 
		              :key="index"
		              :show-animation="true"
		              title-border="none"
		              border="false"
		              :open="false"
		              :show-arrow="false"> <!-- 确保使用v-bind语法 -->
		              <template v-slot:title>
		                <view class="collapse-header">
		                  <view class="collapse-title">{{ item.function }}</view>
		                  <view class="collapse-count">{{ item.count }}{{ item.unit }}</view>
		                </view>
		              </template>
		              <view class="collapse-content">
		                <view class="item-list"
						 v-for="(descItem, descIndex) in item.desc"
						  :key="descIndex">
		                  <view class="item-card">
		                    {{ descItem }}
		                  </view>
		                </view>
		              </view>
		            </uni-collapse-item>
		          </uni-collapse>
		          <view style="text-align: center;padding-bottom: 20px;" v-if="detailList.length == 0">暂无数据</view>
		        </view>
		      </view>
		    </view>
		  </view>
		</uni-popup>
	</view>
</template>
<script>
import { timestampFormatDate } from '@/utils/FormatTime.js'
import { post, postForm } from '@/utils/request';
import { getOverviewAndAlerts, getAnomalyTrend } from '@/api/check.js';
	export default {
		name: 'kanbanRatio',
		props: {
			equipmentData: {
				type: Array,
				default: () => [],
			},
			title: {
				type: String,
				default: '',
			},
		},
		
data() {
			return {
				detailList: [],
				modalTitle: '',
				rangPJTime: [],
				lineData: {},
				optsLine: { xAxis: { labelCount: 6 } },
			};
		},
		onShow() {
			let start = Date.now() - 7*24*3600*1000
			let end = Date.now()
			this.rangPJTime = [timestampFormatDate(start, 'yyyy-MM-dd hh:mm:ss'),timestampFormatDate(end, 'yyyy-MM-dd hh:mm:ss')]
			this.getServerData()
			this.getLine()
		},
		methods: {
			showEquipmentDetail(data) {
			    const details = data.subItem || [];
			    this.modalTitle = data.name + " 详细异常";
			    this.detailList = details;
				this.$refs.popup.open();
			  },
			  
			  closeModal() {
				this.$refs.popup.close();
				// 添加以下代码，确保关闭弹窗时重置详情数据
				this.detailList = [];
				this.modalTitle = '';
			},
			rangpjChange() {
				this.getLine()
			},
			async getLine() {
				const userInfor = uni.getStorageSync('userInfor');
				const dataParams = {
					userId: userInfor.userId,
					startTime: this.rangPJTime[0],
					endTime: this.rangPJTime[1]
				}
				const res = await getAnomalyTrend(dataParams);
				let resData = res.data
				let dataLength = res.data.categories.length
				if(dataLength > 10) {
					this.optsLine.xAxis.labelCount = 4
				} else if(dataLength == 10) {
					this.optsLine.xAxis.labelCount = 3
				} else {
					this.optsLine.xAxis.labelCount = 6
				}
				this.confirmDateRange(resData)
			},
			confirmDateRange(res) {
				this.lineData = JSON.parse(JSON.stringify(res));
			},
			getServerData() {
				// 这里添加getServerData的实现
			},
		},
	};
</script>
<style scoped lang="scss">
	.uni-card-class {
		background: #ffffff;
		border-radius: 10px;
		text-align: center;
	    padding: 10px;
		margin-bottom: 10px;
		margin-top: 10px;
	}
	.uni-card-title {
		font-size: 18px;
		font-weight: 600;
		align-items: center;
	}
	.uni-card-title::before {
	    content: '📊';
	    margin-right: 8px;
	    font-size: 20px;
	}
	/* 设备异常卡片 */
	.equipment-section {
	    margin-bottom: 16px;
	}

	.section-title {
	    font-size: 16px;
	    font-weight: 600;
	    color: #262626;
	    margin-bottom: 12px;
	    display: flex;
	    align-items: center;
	}

	.section-title::before {
	    content: '⚠️';
	    margin-right: 8px;
	    font-size: 18px;
	}

	.equipment-grid {
	    display: grid;
	    grid-template-columns: repeat(2, 1fr);
	    gap: 12px;
	}
	/* 定义不同状态的样式 */
	.equipment-card {
	  background: white;
	  border-radius: 12px;
	  padding: 16px;
	  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	  border: 1px solid #f0f0f0;
	  transition: all 0.2s ease;
	  position: relative;
	  overflow: hidden;
	  
	  &::before {
	    content: '';
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    height: 3px;
	  }
	  
	  &.normal {
	    &::before {
	      background: linear-gradient(90deg, #52c41a, #389e0d);
	    }
	  }
	  
	  &.warning {
	    &::before {
	      background: linear-gradient(90deg, #faad14, #fa8c16);
	    }
	  }
	  
	  &.error {
	    &::before {
	      background: linear-gradient(90deg, #ff4d4f, #cf1322);
	    }
	  }
	  &.pranmy::before {
		  background: linear-gradient(90deg, #1890ff, #1890ff);
	  }
	}

	.equipment-header {
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    margin-bottom: 8px;
	}

	.equipment-name {
	    font-size: 14px;
	    font-weight: 600;
	    color: #262626;
	    display: flex;
	    align-items: center;
	}
	.status-dot {
	  width: 6px;
	  height: 6px;
	  border-radius: 50%;
	  margin-right: 6px;
	  
	  &.status-normal {
	    background-color: #52c41a;
	  }
	  
	  &.status-warning {
	    background-color: #faad14;
	  }
	  
	  &.status-error {
	    background-color: #ff4d4f;
	  }
	  &.status-pranmy {
	    background-color: #1890ff;
	  }
	}

	.equipment-count {
	  font-weight: bold;
	  
	  &.normal {
	    color: #52c41a;
	  }
	  
	&.warning {
	    color: #faad14;
	  }
	&.error {
	    color: #ff4d4f;
	  }
	}
	.equipment-unit {
	    font-size: 11px;
	    color: #8c8c8c;
	    margin-top: 2px;
	}

	.equipment-detail {
	    font-size: 12px;
	    color: #595959;
	    margin-top: 8px;
	    padding-top: 8px;
	    border-top: 1px solid #f0f0f0;
	}
	.popup-wrapper {
	  position: relative;
	  width: 100vw;
	  height: 100vh;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}

	.popup-content {
	  width: 100% !important;
	  max-width: 100% !important;
	  height: auto;
	  margin: 0;
	  border-radius: 0;
	}

	.modal-content {
	  width: 100%;
	  max-height: 80vh;
	  background: white;
	  border-radius: 16px 16px 16px 16px;
	  overflow: hidden;
	}

	@keyframes slideUp {
	    from { transform: translateY(100%); }
	    to { transform: translateY(0); }
	}

	.modal-header {
	  padding: 16px;
	  border-bottom: 1px solid #f0f0f0;
	  display: flex;
	  align-items: center;
	  justify-content: space-between; /* 确保标题和按钮分居两侧 */
	  background: #fafafa;
	  position: relative; /* 新增：为绝对定位提供参照 */
	}

	.modal-title {
	  font-size: 16px;
	  font-weight: 600;
	  color: #262626;
	  flex: 1; /* 新增：标题占据剩余空间 */
	  text-align: center; /* 可选：标题居中 */
	}

	.close-btn {
	  width: 28px;
	  height: 28px;
	  border-radius: 50%;
	  background: #f5f5f5;
	  border: none;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  font-size: 16px;
	  color: #8c8c8c;
	  cursor: pointer;
	  position: absolute; /* 改为绝对定位 */
	  right: 16px; /* 距离右侧16px */
	  top: 50%; /* 垂直居中 */
	  transform: translateY(-50%); /* 垂直居中修正 */
	  z-index: 1; /* 确保在标题上方 */
	}

	.modal-body {
	    padding: 16px;
	    max-height: 400px;
	    overflow-y: auto;
	}

	.detail-list {
	    display: flex;
	    flex-direction: column;
	    gap: 12px;
	}

	.detail-item {
	    background: #fafafa;
	    border-radius: 8px;
	    padding: 12px;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    border-left: 3px solid #1890ff;
	}

	.detail-info {
	    flex: 1;
	}

	.detail-function {
	    font-size: 14px;
	    font-weight: 500;
	    color: #262626;
	    margin-bottom: 2px;
	}

	.detail-desc {
	    font-size: 12px;
	    color: #8c8c8c;
	}

	.detail-count {
	    font-size: 16px;
	    font-weight: 700;
	    color: #1890ff;
	    text-align: right;
	}

	/* 折叠面板样式 - 新增部分 */
	.uni-collapse {
	  width: 98%;
	}

	.uniui-bottom {
		font-size: 16px;
		color: #fff;
	}

	.uni-collapse-item__content {
	  padding: 0 !important;
	  background-color: white !important;
	  border-radius: 0 0 10px 10px !important;
	  box-shadow: 0 3px 12px rgba(0,0,0,0.08);
	  margin-top: -2px;
	}

	.collapse-content {
	  padding: 0;
	}

	.item-list {
	  padding: 0;
	}

	.item-card {
	  padding: 14px 18px;
	  border-bottom: 1px solid #f0f0f0;
	  font-size: 13px;
	  line-height: 1.6;
	  color: #333;
	  background: white;
	  position: relative;
	  padding-left: 28px;
	}

	.item-card:before {
	  content: '•';
	  position: absolute;
	  left: 12px;
	  top: 16px;
	  color: #1890ff;
	  font-size: 12px;
	}

	.item-card:last-child {
	  border-bottom: none;
	}

	.item-card:hover {
	  background: #f8f9fa;
	}

	/* 移除不支持的/deep/选择器 */
</style>
<style>
    /* 使用更具体的选择器确保样式生效 */
    .uni-collapse-item {
      background-color: #1890ff !important;
      margin-bottom: 12px;
      overflow: hidden;
    }
    
    .collapse-header {
      padding: 14px 14px !important;
      background-color: #1890ff !important;
      color: #ffffff;
      display: flex;
      align-items: center;
	  margin-bottom: 20px;
	  justify-content: space-between;
	  border-radius: 8px;
    }
    
    .collapse-title {
      font-size: 16px;
      font-weight: 600;
      color: white;
    }
    /* 为.uni-collapse-item__title添加完整样式 */
    .uni-collapse-item__title {
      display: flex;
      box-sizing: border-box;
      flex-direction: row;
      align-items: center;
      transition: border-bottom-color 0.3s;
      background-color: #1890ff !important;
      padding: 14px 14px !important;
      border-radius: 10px !important;
      box-shadow: 0 3px 12px rgba(0,0,0,0.08);
    }
    .collapse-count {
        margin-left: 20px;
      font-size: 12px;
      font-weight: bold;
      padding: 5px 10px;
      border-radius: 15px;
      min-width: 28px;
      text-align: center;
      background: white; /* 恢复白色背景 */
      color: #1890ff; /* 恢复蓝色文字 */
    }
    
    /* 确保箭头被完全隐藏 */
    .uni-collapse-item__arrow {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
      opacity: 0 !important;
    }
    
    /* 额外的保险措施 */
    .uni-collapse-item__title--arrow {
      padding-right: 14px !important;
    }
</style>